<template>
  <div id="zonghechart4">
    <div ref="chart"></div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartDom: null,
      myChart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initLineColor();
      this.initChartRadar();
    });
  },
  methods: {
    initLineColor() {
      const arr = [
        ["rgba(119, 168, 145, 1)", "rgba(176, 210, 194, 1)"],
        ["rgba(245, 132, 178, 1)", "rgba(248, 163, 143, 1)"],
        ["rgba(80, 164, 164, 1)", "rgba(98, 187, 193, 1)"],
        ["rgba(164, 138, 214, 1)", "rgba(123, 167, 225, 1)"],
        ["rgba(106, 157, 201, 1)", "rgba(88, 103, 133, 1)"],
        ["rgba(13, 195, 147, 1)", "rgba(28, 218, 162, 1)"],
        ["rgba(234, 212, 86, 1)", "rgba(230, 148, 51, 1)"],
        ["rgba(75, 136, 254, 1)", "rgba(46, 190, 239, 1)"],
        ["rgba(242, 70, 123, 1)", "rgba(248, 124, 159, 1)"],
        ["rgba(90, 85, 160, 1)", "rgba(145, 137, 225, 1)"],
      ];

      const list = [];
      arr.forEach((item) => {
        list.push(
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item[0] }, //柱图高亮渐变色
            { offset: 1, color: item[1] }, //柱图高亮渐变色
          ])
        );
      });

      this.lineList = list;
    },
    initChartRadar() {
      const chartDom = this.$refs.chart;
      let myChart = this.$echarts.init(chartDom);
      const option = {
        color: this.lineList,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: 111,
          icon: "circle",
          textStyle: {
            color: "#3A3A3A",
            fontSize: 14,
            fontWeight: 400,
          },
          shadowBlur: 10,
          shadowColor: "rgba(204, 204, 204, 0.7)",
          data: ["2021级", "2022级", "2023级", "2024级", "2025级"],
        },
        grid: {
          left: 42,
          right: 111,
        },
        xAxis: [
          {
            name: "分数段",
            nameTextStyle: {
              color: "#385899",
              fontSize: 14,
              fontWeight: 400,
              padding: [30, 0, 0, 0],
            },
            type: "category",
            data: [
              "50~59分",
              "60~69分",
              "70~79分",
              "80~89分",
              "90~99分",
              "100分",
            ],
            axisTick: {
              show: true,
            },
            axisLabel: {
              color: "rgba(114, 114, 114, 1)",
              fontSize: 14,
              fontWeight: 400,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(238, 238, 238, 1)",
              },
            },
          },
        ],
        yAxis: {
          name: "学生人数",
          type: "value",
          nameTextStyle: {
            align: "center",
            color: "#385899",
            fontSize: 14,
            fontWeight: 400,
            padding: [0, 30, 0, 0],
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(238, 238, 238, 1)",
            },
          },
        },
        series: [
          {
            name: "2021级",
            type: "bar",
            barWidth: "10",
            data: [50, 60, 70, 80, 90, 100],
            itemStyle: {
              normal: {
                shadowBlur: 10,
                barBorderRadius: 20,
                shadowColor: "rgba(204, 204, 204, 0.7)",
              },
            },
          },
          {
            name: "2022级",
            type: "bar",
            barWidth: "10",
            data: [20, 30, 40, 50, 60, 70],
            itemStyle: {
              normal: {
                shadowBlur: 10,
                barBorderRadius: 20,
                shadowColor: "rgba(204, 204, 204, 0.7)",
              },
            },
          },
          {
            name: "2023级",
            type: "bar",
            barWidth: "10",
            data: [30, 40, 50, 60, 70, 80],
            itemStyle: {
              normal: {
                shadowBlur: 10,
                barBorderRadius: 20,
                shadowColor: "rgba(204, 204, 204, 0.7)",
              },
            },
          },
          {
            name: "2024级",
            type: "bar",
            barWidth: "10",
            data: [30, 40, 50, 60, 70, 80],
            itemStyle: {
              normal: {
                shadowBlur: 10,
                barBorderRadius: 20,
                shadowColor: "rgba(204, 204, 204, 0.7)",
              },
            },
          },
          {
            name: "2025级",
            type: "bar",
            barWidth: "10",
            data: [30, 40, 50, 60, 70, 50],
            itemStyle: {
              normal: {
                shadowBlur: 10,
                barBorderRadius: 20,
                shadowColor: "rgba(204, 204, 204, 0.7)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
#zonghechart4 {
  > div {
    width: 100%;
    height: 360px;
  }
}
</style>